import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import { AtButton } from 'taro-ui'
import './orderItem.scss'
import '../../icon.scss';

export class OrderItem extends Component {

  constructor(props){
    super(props);
  }

  componentWillMount () { }

  componentDidMount () { 
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  handlePay(id){
    Taro.navigateTo({
      url: '/pages/order/confirm?id=' + id
    });
  }

  render () {
    return (<View>
      {
            this.props.order.map(function(item){
              return <View className='order-list-item'>
                <View className='order-list-no'>
                  <View>订单编号: {item.order_num}</View>
                  <View className='order-list-time'>{item.created_at}</View>
                </View>
                {
                  item.goods.map(function(gtem){
                    return <View className='order-detail-goods'>
                      <Image className='order-detail-goods-image' src={gtem.small_image} mode='widthFix' />
                      <View className='order-detail-goods-info'>
                        <View className='order-detail-goods-title'>{gtem.show_title}</View>
                        <View className='order-detail-goods-unit'>规格: {gtem.unit}</View>
                        <View className='order-detail-goods-price'>
                          <View className='order-detail-goods-price-text'>￥{gtem.now_price}</View>
                          <View>x{gtem.buy_num}</View>
                        </View>
                      </View>
                    </View>
                  })
                }
                <View className='order-list-price'>
                  <View className='order-list-price-value'>总价: {item.g_total_price}</View>
                </View>
                {
                  item.status === 0
                  ?
                  <View className='order-list-do'>
                    <View className='order-list-status'>等待您的付款</View>
                    <View className='order-list-button'>
                      <AtButton size='small' className='default'>取消订单</AtButton>
                      <AtButton size='small' className='yellow' onClick={this.handlePay.bind(this, item.id)}>去支付</AtButton>
                    </View>
                  </View>
                  :
                  item.status === 1
                  ?
                  <View className='order-list-do'>
                    <View className='order-list-status'>待发货</View>
                    <View className='order-list-button'>
                      <AtButton size='small' className='default'>取消订单</AtButton>
                    </View>
                  </View>
                  :
                  item.status === 2
                  ?
                  <View className='order-list-do'>
                    <View className='order-list-status'>等待收货</View>
                    <View className='order-list-button'>
                      <AtButton size='small' className='default'>取消订单</AtButton>
                    </View>
                  </View>
                  :
                  item.status === 3
                  ?
                  <View className='order-list-do'>
                    <View className='order-list-status'>待评价</View>
                    <View className='order-list-button'>
                      <AtButton size='small' className='yellow'>评价</AtButton>
                      <AtButton size='small' className='default'>退款</AtButton>
                    </View>
                  </View>
                  :
                  null
                }
            </View>
            })
          }
    </View>)
  }
}